import React from 'react';
import {Modal} from 'antd';
import _ from 'lodash';
import Table, {
    setColumnKeys
} from '../_/table';
import _name from './dev';
import redux from '../_/redux';
@redux('workstation', {actions: 'load'})
export default class EditorWs extends React.Component {
    state = {selectedRowKeys: [], selectedRows: [], modal: false}

    componentWillReceiveProps(props) {
        const {wsIds} = props;
        const {wsIds: o} = this.props;
        if (wsIds !== o || !this.state.wsIds) {
            const activeId = this.getActive(wsIds);
            this.setState({wsIds, activeId});
            this.props.onState("wsactive", activeId);
            this.onCancel();
        }
    }

    onOk = () => {
        let {wsIds} = this.state;
        const {selectedRows} = this.state;
        const nIds = _.map(selectedRows, i => i.Id);
        wsIds = _.concat(wsIds, nIds);
        const activeId = this.getActive(wsIds);
        this.setState({wsIds, activeId});
        this.props.onState("wsadd", activeId, nIds);
        this.onCancel();
    }
    onCancel = () => {
        this.setState({modal: false, selectedRowKeys: [], selectedRows: []});
    }

    onRemove = (e, id) => {
        e.stopPropagation();
        let {wsIds} = this.state;
        wsIds = _.pull(wsIds, id);
        const activeId = this.getActive(wsIds, id);
        this.setState({wsIds, activeId});
        this.props.onState("wsremove", activeId, id);
    }
    onWsAdd = () => {
        this.setState({modal: true});
    }

    onRowClick = (r) => {
        this.setState({activeId: r.Id});
        this.props.onState("wsactive", r.Id);
    }
    onRowClassName = (r) => {
        if (r.Id === this.state.activeId) return 'active';
        return '';
    }


    onRowSelection = (r, i) => {
        const {selectedRowKeys, selectedRows} = this.state;
        if (_.indexOf(selectedRowKeys, i) >= 0) {
            _.pull(selectedRowKeys, i);
            _.pull(selectedRows, r);
        } else {
            selectedRowKeys.push(i);
            selectedRows.push(r);
        }
        this.setState({selectedRowKeys, selectedRows});
    }

    getActive = (wsIds, delId) => {
        let activeId = this.state && this.state.activeId;
        if (activeId === undefined || activeId === delId || _.indexOf(wsIds, activeId) < 0) {
            activeId = wsIds.length ? parseInt(_.head(wsIds)) : undefined;
        }
        return activeId;
    }

    render() {
        const {data} = this.props;
        const {wsIds} = this.state;
        const dataSourceSelected = _.filter(data, i => i.Status && _.some(wsIds, k => k === i.Id));
        const dataSourceCanSelected = _.filter(data, i => i.Status && !_.some(wsIds, k => k === i.Id));
        const columnsWs = [{
            dataIndex: 'Name'
        }, {
            width: 30,
            render: (val, data) => (
                <i title="移除" className="iconfont icon-shanchu remove" onClick={(e) => this.onRemove(e, data.Id)}/>
            )
        }];
        setColumnKeys(columnsWs);

        const columnsSelect = [{
            title: '名称',
            dataIndex: 'Name'
        }, {
            title: '检索码',
            dataIndex: 'NameJp'
        }, {
            title: '注释',
            dataIndex: 'Comment'
        }];
        setColumnKeys(columnsSelect);
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({selectedRows, selectedRowKeys});
            },
        };

        return (
            <div>
                <div>
                    <span className="title">工作站权限</span>
                    <i
                        title="添加工作站"
                        className="iconfont icon-tianjia add"
                        onClick={this.onWsAdd}
                    />
                </div>
                <Table
                    size="small"
                    dataSource={dataSourceSelected}
                    columns={columnsWs}
                    pagination={false}
                    showHeader={false}
                    bordered={false}
                    rowClassName={this.onRowClassName}
                    onRowClick={this.onRowClick}
                />

                <Modal
                    width={this.props.width}
                    title="添加工作站"
                    okText="添加"
                    maskClosable={false}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    wrapClassName={`${_name}WsModal`}
                    visible={this.state.modal}
                >
                    <Table
                        size="small"
                        rowSelection={rowSelection}
                        dataSource={dataSourceCanSelected}
                        columns={columnsSelect}
                        pagination={false}
                        onRowClick={this.onRowSelection}
                    />
                </Modal>
            </div>
        );
    }
}
